import React from 'react';
import { Card, Row, Col, Statistic, Progress, Table, Tag } from 'antd';
import { 
  ArrowUpOutlined, 
  ArrowDownOutlined, 
  UserOutlined, 
  HomeOutlined,
  ToolOutlined,
  AlertOutlined
} from '@ant-design/icons';

const StatisticsOverview: React.FC = () => {
  const deviceData = [
    {
      key: '1',
      deviceName: '空调系统',
      total: 45,
      online: 42,
      offline: 3,
      onlineRate: 93.3,
      status: 'normal'
    },
    {
      key: '2',
      deviceName: '电梯系统',
      total: 8,
      online: 8,
      offline: 0,
      onlineRate: 100,
      status: 'excellent'
    },
    {
      key: '3',
      deviceName: '照明系统',
      total: 156,
      online: 148,
      offline: 8,
      onlineRate: 94.9,
      status: 'normal'
    },
    {
      key: '4',
      deviceName: '安防系统',
      total: 32,
      online: 30,
      offline: 2,
      onlineRate: 93.8,
      status: 'normal'
    },
    {
      key: '5',
      deviceName: '消防系统',
      total: 24,
      online: 24,
      offline: 0,
      onlineRate: 100,
      status: 'excellent'
    }
  ];

  const columns = [
    {
      title: '设备类型',
      dataIndex: 'deviceName',
      key: 'deviceName',
    },
    {
      title: '设备总数',
      dataIndex: 'total',
      key: 'total',
    },
    {
      title: '在线数量',
      dataIndex: 'online',
      key: 'online',
      render: (text: number) => <span style={{ color: '#52c41a' }}>{text}</span>,
    },
    {
      title: '离线数量',
      dataIndex: 'offline',
      key: 'offline',
      render: (text: number) => <span style={{ color: '#ff4d4f' }}>{text}</span>,
    },
    {
      title: '在线率',
      dataIndex: 'onlineRate',
      key: 'onlineRate',
      render: (rate: number) => (
        <Progress 
          percent={rate} 
          size="small" 
          strokeColor={rate >= 95 ? '#52c41a' : rate >= 90 ? '#faad14' : '#ff4d4f'}
        />
      ),
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      render: (status: string) => {
        const statusMap = {
          excellent: { color: 'green', text: '优秀' },
          normal: { color: 'blue', text: '正常' },
          warning: { color: 'orange', text: '警告' }
        };
        return <Tag color={statusMap[status as keyof typeof statusMap]?.color}>
          {statusMap[status as keyof typeof statusMap]?.text}
        </Tag>;
      },
    }
  ];

  return (
    <div style={{ padding: '24px' }}>
      <Row gutter={[24, 24]}>
        <Col xs={24} sm={12} lg={6}>
          <Card>
            <Statistic
              title="总用户数"
              value={1284}
              prefix={<UserOutlined />}
              valueStyle={{ color: '#3f8600' }}
              suffix={<ArrowUpOutlined />}
            />
          </Card>
        </Col>
        <Col xs={24} sm={12} lg={6}>
          <Card>
            <Statistic
              title="楼宇总数"
              value={12}
              prefix={<HomeOutlined />}
              valueStyle={{ color: '#1890ff' }}
            />
          </Card>
        </Col>
        <Col xs={24} sm={12} lg={6}>
          <Card>
            <Statistic
              title="设备总数"
              value={265}
              prefix={<ToolOutlined />}
              valueStyle={{ color: '#722ed1' }}
              suffix={<ArrowUpOutlined />}
            />
          </Card>
        </Col>
        <Col xs={24} sm={12} lg={6}>
          <Card>
            <Statistic
              title="告警数量"
              value={23}
              prefix={<AlertOutlined />}
              valueStyle={{ color: '#ff4d4f' }}
              suffix={<ArrowDownOutlined />}
            />
          </Card>
        </Col>
      </Row>

      <Row gutter={[24, 24]} style={{ marginTop: '24px' }}>
        <Col xs={24} lg={12}>
          <Card title="设备在线率统计" style={{ height: '400px' }}>
            <div style={{ textAlign: 'center', marginTop: '100px' }}>
              <Progress 
                type="circle" 
                percent={95.2} 
                size={200}
                strokeColor="#52c41a"
                format={percent => (
                  <div>
                    <div style={{ fontSize: '24px', fontWeight: 'bold', color: '#52c41a' }}>
                      {percent}%
                    </div>
                    <div style={{ fontSize: '14px', color: '#666' }}>整体在线率</div>
                  </div>
                )}
              />
              <div style={{ marginTop: '40px' }}>
                <Row gutter={24}>
                  <Col span={12}>
                    <div style={{ textAlign: 'center' }}>
                      <div style={{ fontSize: '24px', fontWeight: 'bold', color: '#52c41a' }}>252</div>
                      <div style={{ fontSize: '14px', color: '#666' }}>在线设备</div>
                    </div>
                  </Col>
                  <Col span={12}>
                    <div style={{ textAlign: 'center' }}>
                      <div style={{ fontSize: '24px', fontWeight: 'bold', color: '#ff4d4f' }}>13</div>
                      <div style={{ fontSize: '14px', color: '#666' }}>离线设备</div>
                    </div>
                  </Col>
                </Row>
              </div>
            </div>
          </Card>
        </Col>
        <Col xs={24} lg={12}>
          <Card title="能耗趋势" style={{ height: '400px' }}>
            <div style={{ textAlign: 'center', paddingTop: '150px', color: '#999' }}>
              <div style={{ fontSize: '16px' }}>能耗趋势图表</div>
              <div style={{ fontSize: '14px', marginTop: '10px' }}>显示最近30天的能耗数据</div>
            </div>
          </Card>
        </Col>
      </Row>

      <Row gutter={[24, 24]} style={{ marginTop: '24px' }}>
        <Col xs={24}>
          <Card title="设备状态详情">
            <Table 
              columns={columns} 
              dataSource={deviceData} 
              pagination={false}
              size="middle"
            />
          </Card>
        </Col>
      </Row>
    </div>
  );
};

export default StatisticsOverview;